<!DOCTYPE html>
<html>
<head>
	<title>flex</title>
	<meta charset="utf-8">
	<style type="text/css">
		ul {
			display: flex;
			list-style-type: none;
			border: 2px solid #ff7474;
		}
		li {
			width: 100px;
			background-color: #8cacea;
			margin: 5px;
			text-align: center;
		}
	</style>
</head>
<body>
<main>
<section>
	<pre>
		Flex容器属性
		flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
		
		flex-direction属性控制Flex项目沿着主轴（Main Axis）的排列方向。	
		flex-direction: [row] || column || row-reverse || column-reverse;

		wrap: 当一行放满时，如何排放剩余的元素(换行，不换行)
	    flex-wrap: wrap || [nowrap] || wrap-reverse;

	    flex-flow是flex-direction和flex-wrap两个属性的速记属性。
	    默认值： row nowrap

	    justify-content  main-axis内容
	    	 justify-content: 【flex-start】 || flex-end || center || space-between || space-around

	    align-item	 cross-axis 内容
    	    align-items: flex-start || flex-end || center || 【stretch】 || baseline

	    align-content 用于多行的Flex容器	    
	    	align-items: flex-start || flex-end || center || 【stretch】

	    Flex项目属性
			order || flex-grow || flex-shrink || flex-basis	
			order 默认【0】 如果大于零，会移动到前面
			flex-grow 默认【0】，值为1回占据剩余空间
			flex-shrink 缩小【1】 缩小为原来的x倍（小数会变大）

		flex是flex-grow、flex-shrink和flex-basis三个属性的速记	

	</pre>
</section>
<section id="flex-direction">
	<div>flex-direction:  
		<label><input type="radio" value = "row" name="direction" checked/>row</label>
		<label><input type="radio" value = "column" name="direction" />column</label>
		<label><input type="radio" value = "row-reverse" name="direction" />row-reverse</label>
		<label><input type="radio" value = "column-reverse" name="direction" />column-reverse</label>
	</div>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</section>
<section id="flex-wrap">
	<div>flex-wrap:  
		<label><input type="radio" value = "nowrap" name="wrap" checked/>nowrap</label>
		<label><input type="radio" value = "wrap" name="wrap"/>wrap</label>
		<label><input type="radio" value = "wrap-reverse" name="wrap" />wrap-reverse</label>
	</div>
	<div>
		<ul style="width: 600px;">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</div>
</section>
<section id="justify-content">
	<div>justify-content:  
		<label><input type="radio" value="flex-start" name="content" checked />flex-start</label>
		<label><input type="radio" value="flex-end" name="content"/>flex-end</label>
		<label><input type="radio" value="center" name="content" />center</label>
		<label><input type="radio" value="space-between" name="content" />space-between</label>
		<label><input type="radio" value="space-around" name="content" />space-around</label>
	</div>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</div>
</section>
<section id="align-items">
	<div>align-items:  
		<label><input type="radio" value="strecth" name="align-items" checked/>strecth</label>
		<label><input type="radio" value="flex-start" name="align-items"/>flex-start</label>
		<label><input type="radio" value="flex-end" name="align-items"/>flex-end</label>
		<label><input type="radio" value="center" name="align-items" />center</label>
		<label><input type="radio" value="baseline" name="align-items" />baseline</label>
	</div>
	<div>
		<ul style="height: 100px;">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</div>
</section>
<section id="align-content">
	<div>align-content:  
		<label><input type="radio" value="strecth" name="align-content" checked/>strecth</label>
		<label><input type="radio" value="flex-start" name="align-content"/>flex-start</label>
		<label><input type="radio" value="flex-end" name="align-content"/>flex-end</label>
		<label><input type="radio" value="center" name="align-content" />center</label>
	</div>
	<div>
		<ul style="height: 200px; width: 600px;">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
		</ul>
	</div>
</section>
</main>
<script type="text/javascript">
// 给所有的input绑定事件
var inputs = document.querySelectorAll("input");
inputs.forEach(function(input) {
  input.onchange = function(evt) {
  	var select = evt.target.parentElement.parentElement.parentElement,
			  ul = select.querySelector('ul');
		ul.style[select.id] = this.value;	
  }
});
</script>
</body>
</html>